<template>
	<view class="content">
		<view class="bg-color"></view>
		<view class="content-page">
			<!-- banner -->
			<view class="banner">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
					<swiper-item>
						<view class="swiper-item">
							<image src="../../static/index/fj.jpeg" mode="aspectFill"></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image src="../../static/index/fj.jpeg" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			
			<view class="title">
				<view class="main-title">
					遇见青山
				</view>
				<view class="pos">
					<image src="../../static/dw.png" mode=""></image>
					<text>青山区</text>
				</view>
				
			</view>
			
			<!-- search -->
			<view class="search">
				<view class="block"></view>
				<view class="search-icon">
					<image src="../../static/index/search.png" mode="aspectFill"></image>
				</view>
				<view class="search-input">
					<input type="text" placeholder="搜索目的 特价 特色"/>
				</view>
				<view class="sao-ma">
					<image src="../../static/index/saoma.png" mode=""></image>
				</view>
				
				<view class="block"></view>
			</view>
			
			
			<!-- menu -->
			<view class="mymenu">
				<my-menu :list="menuList"></my-menu>
			</view>
		</view>
		
		<view class="category" @click="itemclick">
			<view class="cate-item" :class="selectIndex == index? 'selectColor':''" v-for="item, index in categories" :key="index" @click="selectIndex = index">
				<text>{{item}}</text>
			</view>
		</view>
		
		<view class="show-card">
			<waterfalls-flow :list="list">
				<template v-slot:default="item">
				      <!-- 此处添加插槽内容 -->
						<view class="cnt">
							<view class="title">{{item.title}}</view>
							<view class="text">{{item.text}}</view>
						</view>
				</template>
			</waterfalls-flow>
		</view>
		
		
	</view>
</template>

<script>
	import MyMenu from '../../components/mymenu.vue'
	import waterfallsFlow from '../../components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue'
	export default {
		components: {
			MyMenu,
			waterfallsFlow
		},
		data() {
			return {
				categories: ['推荐', '景点', '美食', '酒店'],
				selectIndex: 0,
				menuList: [
					{
						url: '',
						imageSrc: '/static/tabbar/hotel-active.png',
						text: '酒店',
					},
					{
						url: '',
						imageSrc: '/static/index/wenx.png',
						text: '文创',
					},
					{
						url: '',
						imageSrc: '/static/index/trale.png',
						text: '旅游'
					},
					{
						url: '/pages/shop/shop',
						imageSrc: '/static/tabbar/shop-active.png',
						text: '旅行超市'
					},
					{
						url: '',
						imageSrc: '/static/tabbar/hotel-active.png',
						text: '酒店',
					},
					{
						url: '',
						imageSrc: '/static/index/wenx.png',
						text: '文创',
					},
					{
						url: '',
						imageSrc: '/static/index/trale.png',
						text: '旅游'
					},
					{
						url: '/pages/shop/shop',
						imageSrc: '/static/tabbar/shop-active.png',
						text: '旅行超市'
					},
					{
						url: '',
						imageSrc: '/static/tabbar/hotel-active.png',
						text: '酒店',
					},
					{
						url: '',
						imageSrc: '/static/index/wenx.png',
						text: '文创',
					},
					{
						url: '',
						imageSrc: '/static/index/trale.png',
						text: '旅游'
					},
					{
						url: '/pages/shop/shop',
						imageSrc: '/static/tabbar/shop-active.png',
						text: '旅行超市'
					},
					{
						url: '',
						imageSrc: '/static/tabbar/hotel-active.png',
						text: '酒店',
					},
					{
						url: '',
						imageSrc: '/static/index/wenx.png',
						text: '文创',
					},
					{
						url: '',
						imageSrc: '/static/index/trale.png',
						text: '旅游'
					},
					{
						url: '/pages/shop/shop',
						imageSrc: '/static/tabbar/shop-active.png',
						text: '旅行超市'
					},
					{
						url: '',
						imageSrc: '/static/tabbar/hotel-active.png',
						text: '酒店',
					},
					{
						url: '',
						imageSrc: '/static/index/wenx.png',
						text: '文创',
					},
					{
						url: '',
						imageSrc: '/static/index/trale.png',
						text: '旅游'
					},
					{
						url: '/pages/shop/shop',
						imageSrc: '/static/tabbar/shop-active.png',
						text: '旅行超市'
					},
					{
						url: '',
						imageSrc: '/static/tabbar/hotel-active.png',
						text: '酒店',
					},
					{
						url: '',
						imageSrc: '/static/index/wenx.png',
						text: '文创',
					},
					{
						url: '',
						imageSrc: '/static/index/trale.png',
						text: '旅游'
					},
					{
						url: '/pages/shop/shop',
						imageSrc: '/static/tabbar/shop-active.png',
						text: '旅行超市'
					}
				],
				list: [
					{
						id: 1,
						image_url: 'https://img1.qunarzz.com/sight/p0/1509/76/762cbe4724aa9d04.img.jpg_256x160_da742bce.jpg',
						title: '额济纳胡杨林',
						text: '金色胡杨林，勾魂的秋色',
						
					},
					
					{
						id: 2,
						image_url: 'https://img1.qunarzz.com/sight/p0/201304/09/3661bb15b188e04fc8d65eac.jpg_256x160_99675040.jpg',
						title: '居延海',
						text: '海天一色秋意浓',
					},
						
					{
						id: 3,
						image_url: 'https://img1.qunarzz.com/sight/p0/1809/f6/f67f022d5b48967ca3.img.jpg_256x160_31c98a2d.jpg',
						title: '黑城弱水胡杨风景区',
						text: '看大漠古城的醉美秋色',
					},
					
					{
						id: 4,
						image_url: 'https://img1.qunarzz.com/sight/p0/1509/a9/a9d27764489ed9c8.img.jpg_256x160_d68805ff.jpg',
						title: '大漠胡杨林旅游区',
						text: '生而千年不死，死而千年不倒，倒而千年不朽',
					},
					
					{
						id: 5,
						image_url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F18%2F08%2F24%2F05dbcc82c8d3bd356e57436be0922357.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637321375&t=b919353bd3074bb89c02b7b5f6a59432',
						title: '大漠胡杨林旅游区',
						text: '生而千年不死，死而千年不倒，倒而千年不朽',
					},
					{
						id: 6,
						image_url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F18%2F08%2F24%2F05dbcc82c8d3bd356e57436be0922357.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637321375&t=b919353bd3074bb89c02b7b5f6a59432',
						title: '大漠胡杨林旅游区',
						text: '生而千年不死，死而千年不倒，倒而千年不朽',
					},
					
					{
						id: 7,
						image_url: 'https://img1.qunarzz.com/sight/p0/1809/f6/f67f022d5b48967ca3.img.jpg_256x160_31c98a2d.jpg',
						title: '黑城弱水胡杨风景区',
						text: '看大漠古城的醉美秋色',
					},
					
					{
						id: 8,
						image_url: 'https://img1.qunarzz.com/sight/p0/1509/a9/a9d27764489ed9c8.img.jpg_256x160_d68805ff.jpg',
						title: '大漠胡杨林旅游区',
						text: '生而千年不死，死而千年不倒，倒而千年不朽',
					},
				]
			}
		},
		// 滑动条到达底部，加载更多
		onReachBottom() {
			setTimeout(()=>{
				this.list = [...this.list, ...this.list]
			}, 500)
		},
		onLoad() {

		},
		methods: {
			itemclick() {
				console.log("sdsdsf")
			}
		}
	}
</script>

<style lang="scss">
	
	.block {
		width: 25rpx;
	}
	// 解决背景色问题
	// .bg-color {
	// 	position: absolute;
	// 	width: 750rpx;
	// 	height: 100%;
	// 	background-color: #f4f4f4;
	// 	z-index: -1;
	// }
	.selectColor {
		color: #12c07b;
		
	}
	.banner {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		swiper {
			
			width: 100%;
			height: 450rpx;
			.swiper-item {
				width: 100%;
				
				image {
					width: 100%;
				}
	
			}
		}
	}
	.content {
		// z-index: 2;
		width: 750rpx;
		padding-bottom: calc(var(--window-bottom) + 20px);
		.content-page {
			margin: 0 20rpx;
			// background-color: #2C405A;
			
			
			
			.title {
				padding-top: 280rpx;

				// margin-left: 10rpx;
				color: #fefdfd;
				padding-left: 10rpx;
				.main-title {
					
					font-size: 45rpx;
				}
				
				.pos {
					display: flex;
					align-items: center;
					image {
						width: 35rpx;
						height: 35rpx;
					}
					text {
						font-size: 25rpx;
						// margin-left: 5rpx;
					}
				}
			}
			
			.search {
				width: 100%;
				height: 80rpx;
				margin-top: 50rpx;
				background-color: #FFFFFF;
				border-radius: 10rpx;
				border-bottom: 2px solid #f5f5f5;
				border-top: 2px solid #f5f5f5;
				
				// 给盒子下边框添加阴影
				box-shadow: #ececec 0rpx 2rpx 10rpx;
				
				display: flex;
				align-items: center;
				
				.search-icon {
					width: 50rpx;
					height: 50rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				
				.search-input {
					flex: 1;
					input {
						margin-left: 10rpx;
						font-size: 30rpx;
					}
				}
				
				.sao-ma {
					width: 50rpx;
					height: 50rpx;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			.mymenu {
				margin-top: 30rpx;
				// 给盒子下边框添加阴影
				box-shadow: #ececec 0rpx 2rpx 10rpx;
			}
			
		}
		
		
		.category {
			margin-top: 40rpx;
			width: 100%;
			height: 100rpx;
			color: #4b4b4b;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			
			// justify-content: space-around;
			
			// font-size: ;
			
			overflow: hidden;
			
			.cate-item {
				width: 120rpx;
				// height: 100%;
				display: flex;
				font-size: 30rpx;
				align-items: center;
				text {
					margin: 0 auto;
					
				}
			}
		}
		.show-card {
			margin: 0 20rpx;
			.cnt {
			    .title {
			      font-size: 16px;
			    }
			    .text {
			      font-size: 14px;
			      margin-top: 5px;
			    }
			  }
		}
	}
</style>
